<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <!-- import CSS -->
    <script src="./static/js/vue3.js"></script>
    <link rel="stylesheet" href="./static/css/common.css">
    <link rel="stylesheet" href="./static/css/create.css">
    <!-- import JavaScript -->
    <script src="./static/js/markdown-it.min.js"></script>
    <script src="./static/js/axios.min.js"></script>
    <title>MarGco</title>
</head>
<body>
<div id="app">
    <div class="topNavigationBar">
        <div class="tb-left">
            <div class="marGcoIcon" @click="goTo('./index.html')">MARGCO</div>
            <div class="marGcoNavigationBarButton" v-for="item in topBars" @click="goTo(item.link)">{{item.name}}</div>
        </div>
        <div class="tb-right" v-if="isLogin">
            <img alt="icon" class="userIcon" src="./static/img/CokeGGts.jpg">
        </div>
        <div class="tb-right" v-else>
            <button class="marGcoButton" @click="goTo('./certified.html')">
                {{userButtonText[0]}}
            </button>
            <button class="marGcoButton button-cyan" @click="goTo('./certified.html')">
                {{userButtonText[1]}}
            </button>
        </div>
    </div>
    <div class="mainContainer">
        <div class="dialog-box" v-show="showDialogBox" @click="showDialogBox=false">
            <div class="dialog-box-main" @click.stop>
                <div class="dialog-box-main-top">
                    <div class="input-group" v-for="item in publishContentEntry">
                        <input required="" type="text" name="text" autocomplete="off" class="input">
                        <label class="user-label">{{item}}</label>
                    </div>
                </div>
                <div>
                    <button class="marGcoButton">{{publishContentButton}}</button>
                </div>
            </div>
        </div>
        <div class="helloElement1 helloElementPositionAndSize2"></div>
        <div class="helloElement2 helloElementPositionAndSize1"></div>
        <div class="helloElement3 "></div>
        <div class="left-items">
            <div class="itemCard" v-for="item in [{name:'Hello World',time:'2024-11-17',describe:'HelloWorld'},{name:'HaHaHa',time:'2024-11-17',describe:'ha ha ha'},{name:'你好呀',time:'2024-11-17',describe:'你好你好'}]">
                <div class="content">
                    <div class="heading">{{item.name}}</div>
                    <div class="para">{{item.describe}}<br>{{item.time}}</div>
                    <button class="btn">{{noteItemText}}</button>
                </div>
            </div>
        </div>
        <div class="editCard">
            <textarea class="editCard2" :title="editPrompt" v-model="textareaValue" @keydown="handleKeydown"></textarea>
        </div>
        <div class="previewCard">
            <div class="previewCard-son1"></div>
            <div class="previewCard-son2"></div>
            <button class="marGcoButton previewCardButton button-green" @click="showDialogBox=true;"
                    style="z-index: 10">{{previewCardButtonText}}
            </button>
            <div class="previewCardBody markdownPanel" v-html="editTextToHtml"></div>
        </div>
    </div>
</div>

</body>
<script src="./static/js/create.js"></script>
</html>